<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="captainlnCenter-box">
		<view class="user-head flex-row-center">
			<view class="user-head-info flex-row-center">
				<image :src="userInfo.avatar" class="ava" mode="aspectFill"></image>
				<text class="user-name" v-if="userInfo">会员名：{{userInfo.nickname}}</text>
				<!-- 会员标识 -->
				<image src="@/static/user/captain_sign.png" class="captain_sign" mode=""></image>
			</view>
			<!-- 购买按钮 -->
	<!-- 		<view class="fans-box flex-center" @tap="tomyFans">
				<text class="text">粉丝:</text>
				<text class="num">999</text>
			</view> -->
		</view>
		<!-- 信息卡片 -->
		<view class="card-box flex-row-center">
			<view class="card-info-left flex">
				<text class="name">历史收益</text>
				<view class="price-box">
					<text class="icon">￥</text>
					<text class="num" v-if="accountInfo">{{accountInfo.total}}</text>
				</view>
			</view>
			<view class="card-info-right">
				<view class="info-right-top flex-row-center" @tap="toWithdrawalDetails">
					<text class="text">金额明细</text>
					<up-icon name="arrow-right" color="#D4DCDB" size="24rpx"></up-icon>
				</view>
				<!-- 去提现按钮 -->
				<view class="cash-btn flex-center" @click="toWithdraw">
					<text class="text">立即提现</text>
				</view>
			</view>
		</view>
		<view class="function-box">
			<view @tap="tofunction(item,index)" class='function-item flex-center' v-for="(item,index) in functionList"
				:key="index">
				<image :src="item.icon" class="item-icon" mode=""></image>
				<text class="item-name">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		userInfoStore
	} from '@/stores/user';
	const userStore = userInfoStore();
	const accountInfo = ref(computed(() => userStore.accountInfo));
	const userInfo = ref(computed(() => userStore.userInfo));
	const functionList = [{
			icon: '/page_user/static/Initiate_team_icon.png',
			name: "发起组队",
			url: '/page_user/views/initiateTeam',
			state: 1
		}, {
			icon: '/page_user/static/writeOff_icon.png',
			name: "核销",
			url: '/page_user/views/writeOff',
			state: 1
		},
		// {
		// 	icon: '/page_user/static/registerList_icon.png',
		// 	name: "报名列表",
		// 	url: '/page_user/views/registerList',
		// 	state: 1
		// }
	]
	onLoad(() => {
		userStore.getAccount();
	})

	const toWithdraw = () => { //去提现
		uni.navigateTo({
			url: '/page_user/views/withdraw'
		})
	}
	const tofunction = (item, index) => { //去方法页面
		if (item.state === -1) return
		uni.navigateTo({
			url: item.url
		})
	}
	const toWithdrawalDetails = () => { //查看提现明细
		uni.navigateTo({
			url: '/page_user/views/withdrawalDetails'
		})
	}
	const tomyFans = () => { //查看我的粉丝
		uni.navigateTo({
			url: '/page_user/views/myFans'
		})
	}
</script>

<style lang="scss" scoped>
	.user-head {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		justify-content: space-between;
		margin-top: 40rpx;

		.user-head-info {
			.ava {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.user-name {
				// width: 192rpx;
				font-weight: 500;
				font-size: 34rpx;
				color: #CDCECE;
				margin: 0 6rpx 0 18rpx;
			}

			.captain_sign {
				width: 54rpx;
				height: 30rpx;
			}

		}

		.fans-box {
			.text {
				font-weight: 500;
				font-size: 22rpx;
				color: #AD987B;
				margin-right: 10rpx;
			}

			.num {
				font-weight: bold;
				font-size: 28rpx;
				color: #CDCECE;
			}
		}
	}

	.card-box {
		width: 674rpx;
		height: 228rpx;
		background: linear-gradient(90deg, #395E5C, #425D4E);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 40rpx auto;
		box-sizing: border-box;
		padding: 40rpx 22rpx;
		justify-content: space-between;

		.card-info-left {
			flex-direction: column;
			justify-content: space-between;
			height: 100%;

			.name {
				font-weight: 500;
				font-size: 30rpx;
				color: #D4DCDB;
			}

			.price-box {
				color: #D4DCDB;
				font-weight: bold;

				.icon {
					font-size: 36rpx;
				}

				.num {
					font-size: 72rpx;
				}
			}
		}

		.card-info-right {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: space-between;

			.info-right-top {
				.text {
					font-weight: 500;
					font-size: 24rpx;
					color: #D4DCDB;
				}
			}

			.cash-btn {
				width: 202rpx;
				height: 74rpx;
				background: $btn-bg-color;
				border-radius: 37rpx;

				.text {
					font-weight: 800;
					font-size: 30rpx;
					color: $btn-text-color;
				}
			}
		}
	}

	.function-box {
		width: 750rpx;
		display: grid;
		// grid-template-columns: auto auto auto;
		// grid-template-rows: auto auto auto;
		grid-template-columns: repeat(3, 1fr);
		/* 三列等宽 */
		row-gap: 42rpx;

		.function-item {
			flex-direction: column;

			.item-icon {
				width: 52rpx;
				height: 52rpx;
			}

			.item-name {
				font-weight: 500;
				font-size: 24rpx;
				color: #ABCDDE;
				margin-top: 12rpx;
			}
		}

		.unlocked-box {
			flex-direction: column;
			position: relative;

			.item-icon {
				width: 52rpx;
				height: 52rpx;
				opacity: .3;
			}

			.item-name {
				font-weight: 500;
				font-size: 24rpx;
				color: #3E484E;
				margin-top: 12rpx;
			}

			.unlocked_icon {
				width: 80rpx;
				height: 22rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 18rpx;
			}
		}
	}
</style>